<template>
  <!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
  <view>
    <view v-show="i === index">
      <!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
      <!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->

      <mescroll-body :ref="'mescrollRef'+i" @init="mescrollInit" :height="height" :top="top" bottom="80"  :down="downOption" @down="downCallback"
                     :up="upOption" @up="upCallback" @emptyclick="emptyClick">
        <!-- 数据列表 -->
        <view class="shop-list">
          <view class="shop-item" v-for="item in data" @click="toDetail(item)">
            <base-image height="140rpx" width="140rpx" radius="10rpx" :list="item.img_url"></base-image>
            <view class="shop-text-box">
              <view class="text-header once">{{item.name}}</view>
              <view class="once">{{item.admin_mobile}}</view>
              <view class="second">{{item.notice?item.notice:''}}{{item.address}}</view>
            </view>
          </view>
        </view>


      </mescroll-body>



    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import myService from '../../../../service/my/MyService.js'

export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
  props: {
    i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
    index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
      type: Number,
      default () {
        return 0
      }
    },
    tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
      type: Array,
      default () {
        return []
      }
    },
    type:{
      type: String,
      default(){
        return ''
      }
    }

  },
  watch:{
    'type': {
      async handler (newName,oldName) {
        if(newName || oldName){
          if(this.isSearch){
            this.typeValue = newName
            this.inputWord()
          }

        }
      },
      immediate: true,
    },
  },
  data() {
    return {

      downOption: {
        auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        textNoMore: '-没有更多了-', // 没有更多数据的提示文本
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: '~ 空空如也 ~', // 提示
          btnText: '回工我的'
        }
      },
      data: [],
      total: 0,
      colors:{
        10:'#70b603',
        20:'#e6a23c',
        30:'#e6a23c',
        40:'#e6a23c',
        50:'#e6a23c',
        60:'#A25723',
        70:'#f56c6c',
        80:'#f56c6c',
      },
      // colors: ['#f56c6c', '#e6a23c', '#398ade', '#70b603', '#909399'],
      isError: false,
      params:{},
      height:(uni.getSystemInfoSync().screenHeight - getApp().globalData.statusBarHeight) * 2 - 88 - 500,
      // top:getApp().globalData.statusBarHeight * 2 + 88+ 70,
      top:getApp().globalData.statusBarHeight * 2 + 88 + 130,

      imgBaseURL:this.$settings.imgBaseURL,

      searchTimer:null,
      isSearch:true,

      typeValue:this.type
    }
  },
  created() {

  },
  methods: {
    // 获得数据
    async getData(page = 1) {
      let res = []
      let param = {
        pageNo:page,
        pageSize:10,
      }
      if(this.index == 0){
        param.cate_id = this.typeValue?this.typeValue:undefined
        res = await myService.list(param)

      }if(this.index == 1){
        param.cate_id = this.typeValue?this.typeValue:undefined
        res = await myService.list(param)
      }

      if (page == 1) this.reset(); //如果是第一页需手动制空列表
      this.data = this.data.concat(res.message.data.data)
      this.total = res.message.data.total
      //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
      this.mescroll.endByPage(res.message.data.data.length, this.total); //必传参数(当前页的数据个数, 总页数)

    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    async upCallback(page) {
      try {
        await this.getData(page.num)
      } catch {
        this.isError = true
        //联网失败, 结束加载
        this.mescroll.endErr();
      }
    },
    // 输入监听
    inputWord(){
      // this.curWord = e.detail.value // 已使用v-model,无需再次赋值
      // 节流,避免输入过快多次请求
      if(this.index == this.i){
        this.searchTimer && clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(()=>{
          this.doSearch()
        },300)
      }
    },
    // 搜索
    doSearch(){
      this.reset()
      this.mescroll.resetUpScroll();
    },

    // 重置数据
    reset() {
      this.isError = false
      this.data = []
      this.total = 0

    },
    setParam(param){
      this.params = param;
    },
    //点击空布局按钮的回调
    emptyClick() {
      // uni.showToast({
      // 	title:'点击了按钮,具体逻辑自行实现'
      // })
      uni.switchTab({
        url: '/pages/user/user',
      })
    },

    // 下拉刷新的回调 (mixin默认resetUpScroll)
    async downCallback() {
      this.typeValue = '' // 这里会报一个警告
      this.$emit('react');
      this.isSearch = false

      this.reset()
      if(this.mescroll.optUp.use){
        this.mescroll.resetUpScroll()
      }else{
        setTimeout(()=>{
          this.mescroll.endSuccess();
        }, 500)
      }

      setTimeout(()=>{
        this.isSearch = true;
      }, 500)
    },

    async handleCancel(item){
      const res = await this.$request.post(this.$api.goodsapplyCancel,{apply_id:item.apply_id})
      if(res.status == 200){
        uni.showToast({
          title: '取消成功',
          icon: 'none',
          duration: 2000,
          success: function() {

          }
        });
      }

    },
    handleAdd(item){
      const url = '/packageMe/pages/selectpro/logisticsAdd?apply_id=' + item.apply_id
      uni.navigateTo({
        url: url,
      })
    },

    // 跳转详情
    toDetail(item){
      const url = '/pages/my/shop/detail?id=' + item.id
      uni.navigateTo({
        url:url
      })
    },

  },
}
</script>
